<template>
  <div class="contract-page">
    <div class="contract-title">ADC MCP3008</div>
    <div v-html="content"></div>
    <div class="contract-footer">
      <div class="contract-uid">UID:2667909</div>
      <div class="contract-company">
        Perusahaan: PT EstelarOlas SEMICON MANUFACTURE
        <div class="contract-logo">
          <img src="@/assets/images/z.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const content = ref("");
const { t } = useI18n();
onMounted(() => {
  content.value = `<p class="p">
	${t("product_spec_resolution")}<br />
  ${t("product_spec_interface")}<br />
  ${t("product_spec_sampling_rate")}<br />
  ${t("product_spec_desc")}<b><br />
<br />
</b> 
</p>
<p class="p">
	<b><br />
</b> 
</p>
<p class="p">
	<b>${t("cooperation_agreement_title")}</b> 
</p>
<p class="p">
	<b>${t("cooperation_parties_first")}</b><br />
<b>${t("cooperation_parties_second")}</b>
</p>
<p class="p">
	${t("cooperation_preamble")}
</p>
<h3>
	<b>${t("article1_title")}</b><b></b> 
</h3>
<p class="p">
	${t("article1_content")}
</p>
<h3>
	<b>${t("article2_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article2_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article2_point2")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	3.&nbsp;${t("article2_point3")}
</p>
<h3>
	<b>${t("article3_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article3_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article3_point2")}
</p>
<h3>
	<b>${t("article4_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article4_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article4_point2")}
</p>
<h3>
	<b>${t("article5_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article5_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article5_point2")}
</p>
<h3>
	<b>${t("article6_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article6_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article6_point2")}
</p>
<h3>
	<b>${t("article7_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article7_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article7_point2")}
</p>
<h3>
	<b>${t("article8_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article8_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article8_point2")}
</p>
<h3>
	<b>${t("article9_title")}</b><b></b> 
</h3>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	1.&nbsp;${t("article9_point1")}
</p>
<p class="MsoNormal" style="margin-left:36.0000pt;text-indent:-18.0000pt;">
	2.&nbsp;${t("article9_point2")}
</p>`;
});
</script>

<style scoped>
.contract-title {
  font-weight: bold;
  font-size: 16px;
}
.contract-page {
  margin: 17px;
  border: 0.5px solid rgba(153, 153, 153, 0.3);
  padding: 5px 11px;
  border-radius: 8px;
  background-color: rgba(254, 242, 230, 0.05);
  color: #f6eade;
}

:deep(.p) {
  margin: 0 !important;
  line-height: 1.4;
}
.contract-footer {
  margin-top: 17px;
  margin-bottom: 34px;
  font-size: 13px;
}
.contract-uid {
  border-bottom: 0.5px solid rgb(153, 153, 153);
}
.contract-company {
  position: relative;
  margin-top: 5px;
  padding-top: 11px;
  border-bottom: 0.5px solid rgb(153, 153, 153);
}
.contract-logo {
  position: absolute;
  top: 0;
  left: 229px;
  img {
    width: 68px;
    height: 68px;
    opacity: 0.8;
  }
}
</style>
